<template>
  <div ref="echartsDom" v-if="echart" class="bars hidden-danger-statistics"></div>
  <Empty v-else class="hidden-danger-statistics-empty" />
</template>

<script lang="ts" setup>
import { onMounted, onBeforeUnmount, ref, watch,inject } from 'vue'
import { echarts, ECOption } from './echartIntroduce'
import { Empty } from 'ant-design-vue'
// 图表宽高比例转换
import { getCurrentWidth, getCurrentHeight } from '@/utils/common'
const emit = defineEmits(['echartsClick'])

const httpApi: any = inject('$http')
const barDataBank = ref([])
const lineDataBank = ref([])
function getInitData() {
  /**
  httpApi.cityFixedAssets1Api
    .echartsReportForms({})
    .then((res: any) => {
      if (res.success) {
        listDataBank.value = res.body || []
      } else {
        console.error('系统异常')
      }
    })
    .catch((err: any) => {
      console.error(err || '系统异常')
    })
	*/
    barDataBank.value = [100,100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100];
	lineDataBank.value = [100,100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100];
}
getInitData()


let props = withDefaults(
  defineProps<{
    selectTab: any
  }>(),
  {
    selectTab: '' as any
  }
)
onMounted(() => {
  watch(
    () => props.selectTab,
    (value) => {
      if (value) {
        doQuery()
      }
    },
    { immediate: true, deep: true }
  )
})
onBeforeUnmount(() => {
  removeEventListener('resize', resizeChart)
})
let echart = ref(true)
let myChart: any = null

function resizeChart() {
  myChart && myChart.resize()
}
const doQuery = async () => {
  echart.value = true
  let xAxisData = []
  let barData = []
  let lineData = []
  let lineData2 = [] as any //广州增速
  let legendData = []
  // 广州市
  if (props.selectTab == 1) {
    xAxisData = [
      '23.1',
      '23.2',
      '23.3',
      '23.4',
      '23.5',
      '23.6',
      '23.6',
      '23.8',
      '23.9',
      '23.10',
      '23.11',
      '23.12'
    ]
    //barData = [120, 200, 150, 80, 70, 200, 150, 80, 70, 80, 70, 20]
    //lineData = [10, 20, 100, 8, 170, 20, 100, 8, 170, 20, 100, 18]
	barData = barDataBank.value;
	lineData = lineDataBank.value;
    legendData = ['实际完成投资（亿元）', '总体增速（%）']
  } else {
    // 各区
    xAxisData = [
      '番禺区1',
      '番禺区2',
      '番禺区3',
      '番禺区4',
      '番禺区5',
      '番禺区6',
      '番禺区7',
      '番禺区8',
      '番禺区9',
      '番禺区10',
      '番禺区11'
    ]
    barData = [120, 200, 150, 80, 70, 200, 150, 80, 70, 80, 70]
    lineData = [10, 20, 100, 8, 170, 20, 100, 8, 170, 20, 100]
    lineData2 = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
    legendData = ['实际完成投资（亿元）', '各区增速（%）', '广州市增速（%）']
  }
  if (!myChart) {
    await initEcharts()
  }
  myChart?.setOption(getOption(xAxisData, barData, lineData, legendData, lineData2), {
    notMerge: true
  })
}

let echartsDom = ref()
const initEcharts = async () => {
  myChart = await echarts.init(echartsDom.value)
  // 屏幕自适应
  addEventListener('resize', resizeChart, false)
}
// echart配置
const getOption = (
  xAxisData: any,
  barData: any,
  lineData: any,
  legendData: any,
  lineData2?: any
) => {
  const max = barData
    .concat(lineData)
    .concat(lineData2)
    .reduce((pre: any, cur: any) => (pre > cur ? pre : cur), 0)

  let option: ECOption = {
    legend: {
      data: legendData,
      top: getCurrentHeight(24),
      left: 'center',
      textStyle: {
        color: '#fff',
        fontSize: getCurrentHeight(30)
      },
      itemWidth: getCurrentWidth(16),
      itemHeight: getCurrentHeight(16)
    },
    tooltip: {
      trigger: 'axis',
      formatter: (params: any) => {
        let result = ''
        params
          .filter(
            (item: any) => item.seriesName == legendData[0] || item.seriesName == legendData[1]
          )
          .map((item: any, index: number) => {
            let dotHtml = `<span style="display:inline-block;margin-right:${getCurrentWidth(12)}px;border-radius:50%;width:${getCurrentWidth(18)}px;height:${getCurrentHeight(18)}px;background-color:${item.color.colorStops ? item.color.colorStops[0].color : item.color}"></span>`
            if (index == 0) {
              result = `${item.axisValue}</br>${dotHtml}${legendData[0]}：${item.data}</br>`
            } else {
              result += `${dotHtml}${legendData[1]}：${item.data}`
            }
          })
        return result
      },
      textStyle: {
        fontSize: getCurrentHeight(22)
      }
    },
    grid: {
      left: '10',
      right: '0',
      bottom: '0',
      top: getCurrentHeight(100),
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: xAxisData,
        // 坐标刻度的颜色
        axisLabel: {
          color: '#d0d5db',
          fontSize: getCurrentHeight(18)
        },
        // 坐标轴的颜色
        axisLine: {
          lineStyle: {
            color: '#E8EAF0'
          }
        }
      },
      {
        type: 'category',
        data: xAxisData,
        show: false,
        axisLabel: {
          color: '#d0d5db',
          fontSize: getCurrentHeight(18)
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
		position: 'left',
        //坐标的字体颜色
        axisLabel: {
          color: '#d0d5db',
          fontSize: getCurrentHeight(19)
        },
        //背景的网格线
        splitLine: {
          show: true, //隐藏或显示
          lineStyle: {
            // 使用深浅的间隔色
            color: ['#304C88']
          }
        }
      },
	  {
	    type: 'value',
	  	position: 'right',
	    //坐标的字体颜色
	    axisLabel: {
	      color: '#d0d5db',
	      fontSize: getCurrentHeight(19)
	    },
	    //背景的网格线
	    splitLine: {
	      show: true, //隐藏或显示
	      lineStyle: {
	        // 使用深浅的间隔色
	        color: ['#304C88']
	      }
	    }
	  }
    ],
    series: [
      {
        xAxisIndex: 1,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(26, 51, 106, 0.85)' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(26, 51, 106, 0.25)' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        },
        data: barData.map(() => max),
        barWidth: getCurrentWidth(64),
        // 悬浮后的柱子阴影
        // emphasis: {
        //   itemStyle: {
        //     color: {
        //       type: 'linear',
        //       x: 0,
        //       x2: 0,
        //       y: 0,
        //       y2: 1,
        //       colorStops: [{
        //         offset: 0,
        //         color: 'rgba(26, 51, 106, 0.85)'
        //       },
        //       {
        //         offset: 1,
        //         color: 'rgba(26, 51, 106, 0.25)'
        //       }]
        //     },
        //   },
        // },
        type: 'bar'
      },
      //柱子
      {
        name: legendData[0],
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(57,115,250, 1)' // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(57,115,250, 0.1)' // 100% 处的颜色
            }
          ]
        }, //设定实线点的颜色
        type: 'bar',
        data: barData,
        barWidth: getCurrentWidth(32),
		yAxisIndex: 0,
        // 显示顶部文字
        label: {
          show: false,
          position: 'top',
          color: '#3873F9',
          fontSize: getCurrentHeight(22)
        }
      },
      // 折线
      {
        name: legendData[1],
        symbolSize: getCurrentWidth(12), //设定实心点的大小
        color: '#FFAA80',
        type: 'line',
		yAxisIndex: 1,
        lineStyle: {
          width: getCurrentWidth(3)
        },
        data: lineData,
        // 显示顶部文字
        label: {
          show: false,
          color: '#FFAA80',
          fontSize: getCurrentHeight(22)
        }
      }
    ]
  }
  if (legendData.length == 3) {
    option?.series?.push({
      name: legendData[2],
      symbol: 'none',
      color: '#6599C3',
      type: 'line',
      lineStyle: {
        width: getCurrentWidth(3),
        type: 'dotted'
      },
      data: lineData2
    })
  }
  return option
}
</script>

<style scoped lang="scss">
.hidden-danger-statistics {
  height: 378vh * $Bh;
}

.hidden-danger-statistics-empty {
  height: 378vh * $Bh;
  padding-top: 100vh * $Bh;
}
</style>
